﻿<!DOCTYPE html>
<html>
<head>
<title>前端开发面试题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 16px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
}

h1:first-of-type {
  font-size: 32px;
  text-align: center;
}

h2 {
  font-size: 26px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #bd4147;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 3px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #eee;
  color: #00d;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 16px;
    padding: 1px 4px;
}

/* QUOTES
=============================================================================*/
blockquote {
  border-left: 4px solid #42b983;
  padding: 0 15px;
  color: #d1d9e1;
  background: #474949;
}

blockquote:first-of-type {
  color: #777;
  background: #f8f8f8;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/
table {
	margin: 0 auto;
	border-collapse: collapse;
	width: 100%;
	box-sizing: border-box;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px; 
}

table th {
  font-weight: bold;
  text-align: center !important;
  background-color: #9ec68e;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #dff0d8;
}

/* IMAGES
=============================================================================*/
img {
  max-width: 100%;
}

p > img {
  display: table;
  margin: 0 auto;
}
</style>
<style type="text/css">
.highlight  { background: #ffffff; }
.highlight .c { color: #999988; font-style: italic } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { font-weight: bold } /* Keyword */
.highlight .o { font-weight: bold } /* Operator */
.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #999999 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { font-weight: bold } /* Keyword.Constant */
.highlight .kd { font-weight: bold } /* Keyword.Declaration */
.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #009999 } /* Literal.Number */
.highlight .s { color: #d14 } /* Literal.String */
.highlight .na { color: #008080 } /* Name.Attribute */
.highlight .nb { color: #0086B3 } /* Name.Builtin */
.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
.highlight .no { color: #008080 } /* Name.Constant */
.highlight .ni { color: #800080 } /* Name.Entity */
.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
.highlight .nn { color: #555555 } /* Name.Namespace */
.highlight .nt { color: #000080 } /* Name.Tag */
.highlight .nv { color: #008080 } /* Name.Variable */
.highlight .ow { font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #009999 } /* Literal.Number.Float */
.highlight .mh { color: #009999 } /* Literal.Number.Hex */
.highlight .mi { color: #009999 } /* Literal.Number.Integer */
.highlight .mo { color: #009999 } /* Literal.Number.Oct */
.highlight .sb { color: #d14 } /* Literal.String.Backtick */
.highlight .sc { color: #d14 } /* Literal.String.Char */
.highlight .sd { color: #d14 } /* Literal.String.Doc */
.highlight .s2 { color: #d14 } /* Literal.String.Double */
.highlight .se { color: #d14 } /* Literal.String.Escape */
.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
.highlight .si { color: #d14 } /* Literal.String.Interpol */
.highlight .sx { color: #d14 } /* Literal.String.Other */
.highlight .sr { color: #009926 } /* Literal.String.Regex */
.highlight .s1 { color: #d14 } /* Literal.String.Single */
.highlight .ss { color: #990073 } /* Literal.String.Symbol */
.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #008080 } /* Name.Variable.Class */
.highlight .vg { color: #008080 } /* Name.Variable.Global */
.highlight .vi { color: #008080 } /* Name.Variable.Instance */
.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
.pl-c {
    color: #969896;
}

.pl-c1,.pl-mdh,.pl-mm,.pl-mp,.pl-mr,.pl-s1 .pl-v,.pl-s3,.pl-sc,.pl-sv {
    color: #0086b3;
}

.pl-e,.pl-en {
    color: #795da3;
}

.pl-s1 .pl-s2,.pl-smi,.pl-smp,.pl-stj,.pl-vo,.pl-vpf {
    color: #333;
}

.pl-ent {
    color: #63a35c;
}

.pl-k,.pl-s,.pl-st {
    color: #a71d5d;
}

.pl-pds,.pl-s1,.pl-s1 .pl-pse .pl-s2,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre,.pl-src,.pl-v {
    color: #df5000;
}

.pl-id {
    color: #b52a1d;
}

.pl-ii {
    background-color: #b52a1d;
    color: #f8f8f8;
}

.pl-sr .pl-cce {
    color: #63a35c;
    font-weight: bold;
}

.pl-ml {
    color: #693a17;
}

.pl-mh,.pl-mh .pl-en,.pl-ms {
    color: #1d3e81;
    font-weight: bold;
}

.pl-mq {
    color: #008080;
}

.pl-mi {
    color: #333;
    font-style: italic;
}

.pl-mb {
    color: #333;
    font-weight: bold;
}

.pl-md,.pl-mdhf {
    background-color: #ffecec;
    color: #bd2c00;
}

.pl-mdht,.pl-mi1 {
    background-color: #eaffea;
    color: #55a532;
}

.pl-mdr {
    color: #795da3;
    font-weight: bold;
}

.pl-mo {
    color: #1d3e81;
}
.task-list {
padding-left:10px;
margin-bottom:0;
}

.task-list li {
    margin-left: 20px;
}

.task-list-item {
list-style-type:none;
padding-left:10px;
}

.task-list-item label {
font-weight:400;
}

.task-list-item.enabled label {
cursor:pointer;
}

.task-list-item+.task-list-item {
margin-top:3px;
}

.task-list-item-checkbox {
display:inline-block;
margin-left:-20px;
margin-right:3px;
vertical-align:1px;
}
</style>
<base target=_blank>
</head>
<body>
<h1 id="-">前端开发面试题</h1>
<blockquote>
<p>站点地址：<a href="https://xiaojiangk.gitee.io/full-stack-development/">全栈开发</a><br>原文链接：<a href="http://0313.name/archives/502?utm_medium=hao.caibaojian.com&amp;utm_source=hao.caibaojian.com">前端开发面试题</a></p>
</blockquote>
<h2 id="html">HTML</h2>
<ul>
<li>Doctype作用？标准模式与兼容模式各有什么区别？</li></ul>
<blockquote>
<p>1、<code>&lt;!DOCTYPE&gt;</code>声明位于HTML文档中的第一行，处于<code>&lt;html&gt;</code>标签之前，告知浏览器的解析器用什么文档标准解析。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。<br>2、标准模式的排版和JS运行模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。</p>
</blockquote>
<ul>
<li>HTML5为什么只需要写<code>&lt;!DOCTYPE HTML&gt;</code>？</li></ul>
<blockquote>
<p>HTML5不基于SGML(标准通用标记语言)，因此不需要对DTD(文档类型定义)进行引用，但是需要<code>doctype</code>来规范浏览器的行为（让浏览器按照它们应该的方式来运行）<br>HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。</p>
</blockquote>
<ul>
<li>行内元素有哪些？块级元素有哪些？空（<code>void</code>）元素有哪些？</li></ul>
<blockquote>
<p>首先：CSS规范规定，每个元素都有<code>display</code>属性，确定钙元素的类型，每个元素都有默认的<code>display</code>值，如<code>div</code>的<code>display</code>默认值为<code>block</code>，都是块级元素；<code>span</code>默认<code>display</code>属性值为<code>inline</code>，是行内元素。<br>1、行内元素：<code>a</code>、<code>b</code>、<code>span</code>、<code>img</code>、<code>input</code>、<code>select</code>、<code>strong</code>（强调的语气）<br>2、块级元素：<code>div</code>、<code>ul</code>、<code>ol</code>、<code>li</code>、<code>dl</code>、<code>dt</code>、<code>dd</code>、<code>h1</code>、<code>h2</code>、<code>h3</code>、<code>h4</code>、<code>p</code><br>3、常见的空元素：<code>br</code>、<code>hr</code>、<code>img</code>、<code>input</code>、<code>link</code>、<code>meta</code><br>   不常用的空元素：<code>area</code>、<code>base</code>、<code>col</code>、<code>command</code>、<code>embed</code>、<code>keygen</code>、<code>param</code>、<code>source</code>、<code>track</code>、<code>wbr</code></p>
</blockquote>
<ul>
<li>页面导入样式时，使用<code>link</code>和<code>@import</code>有什么区别？</li></ul>
<blockquote>
<p>1、<code>link</code>属于<code>XHTML</code>标签，除了加载<code>CSS</code>外，还能用于定义<code>RSS</code>，定义<code>rel</code>连接属性等作用；而<code>@import</code>是<code>CSS</code>提供的，只能用于加载<code>CSS</code>。<br>2、页面被加载时，<code>link</code>会同时被加载，而<code>@import</code>引用的<code>CSS</code>会等到页面被加载完再加载。<br>3、<code>import</code>是<code>CSS2.1</code>提出的，只在<code>IE5</code>以上才能被识别，而<code>link</code>是<code>XHTML</code>标签，无兼容问题。<br>4、<code>link</code>支持使用<code>JS</code>控制<code>DOM</code>改变样式，而<code>@import</code>不支持。</p>
</blockquote>
<ul>
<li>介绍一下你对浏览器内核的理解？</li></ul>
<blockquote>
<p>主要分成两部分：渲染引擎（<code>layout</code>或<code>engine</code>）和JS引擎。<br>渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理信息（加入CSS等），以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。<br>JS引擎：解析和执行JS来实现网页的动态效果。<br>最开始渲染引擎和JS引擎并没有区分额很明确，后来JS引擎越来越独立，内核就倾向于只是指渲染引擎。</p>
</blockquote>
<ul>
<li>常见的浏览器内核有哪些？</li></ul>
<blockquote>
<p><code>Trident</code>内核：IE，MaxThon，TT，The World，360，搜狗浏览器等[MSHTML]<br><code>Gecko</code>内核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等<br><code>Presto</code>内核：Opera7及以上[Opera内核原为：<code>Presto</code>，现为：<code>Blink</code>]<br><code>Webkit</code>内核：Safari，Chrome等[Chrome：Blink（Webkit的分支）]</p>
</blockquote>
<ul>
<li>HTML5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？</li></ul>
<blockquote>
<p>HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。<br>绘画<code>canvas</code><br>用于媒介回放的<code>video</code>和<code>audio</code>元素<br>本地离线存储<code>localStorage</code>长期存储数据，浏览器关闭后数据不丢失<br><code>sessionStorage</code>的数据在浏览器关闭后自动删除</p>
<p>语义化更好的内容元素，比如<code>article</code>、<code>footer</code>、<code>header</code>、<code>nav</code>、<code>section</code><br>表单控件：<code>calendar</code>、<code>date</code>、<code>time</code>、<code>email</code>、<code>url</code>、<code>search</code><br>新技术：<code>webworker</code>、<code>websocket</code>、<code>Geolocation</code></p>
<p>移除的元素：<br>纯表现的元素：<code>basefont</code>、<code>big</code>、<code>center</code>、<code>font</code>、<code>s</code>、<code>strike</code>、<code>tt</code>、<code>u</code><br>对可用性产生负面影响的元素：<code>frame</code>、<code>frameset</code>、<code>noframes</code></p>
<p>支持HTML5新标签：<br><code>IE8/IE7/IE6</code>支持通过<code>document.createElement</code>方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加默认的样式。<br>也可以直接使用成熟的框架，如<code>html5shim</code>：</p>
</blockquote>
<pre><code>&lt;!--[if lt IE 9]&gt;
    &lt;script&gt; src=&quot;http://html5shim.googlecode.com/svn/trunk/html5.js&quot;&lt;/script&gt;    
&lt;![endif]&gt;
</code></pre><blockquote>
<p>区分HTML5,：DOCTYPE声明，新增的结构元素，功能元素等    </p>
</blockquote>
<ul>
<li>简述一下你对HTML语义化的理解？</li></ul>
<blockquote>
<p>语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析<br>没有CSS样式也能正常阅读文档<br>搜索引擎的爬虫依赖HTML标记来确定上下文和各个关键字的权重，有利于SEO</p>
</blockquote>
<ul>
<li>HTML5的离线存储怎么使用，工作原理解释一下？</li></ul>
<blockquote>
<p>在用户没有联网时，可以正常访问站点或应用；在联网的情况下，更新用户机器上的缓存文件。<br>原理：HTML5的离线存储是基于一个新建的<code>.appchache</code>文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像<code>cookie</code>一样被存储下来。之后当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。</p>
<p>如何使用：<br>1、页面头部加入一个<code>manifest</code>的属性<br>2、在<code>cache.manifest</code>文件的编写离线存储的资源<br>3、在离线状态下，操作<code>window.applicationCache</code>进行需求实现</p>
</blockquote>
<ul>
<li>浏览器是如何对HTML5的离线存储资源进行管理和加载的？</li></ul>
<blockquote>
<p>在线的情况下，浏览器发现<code>html</code>头部有<code>manifest</code>属性，它会请求<code>manifest</code>文件，如果是第一次访问<code>app</code>，浏览器会根据<code>manifest</code>文件的内容下载相应的资源并且进行离线存储。<br>如果已经访问过<code>app</code>，并且资源已经离线存储，浏览器会使用离线的资源加载页面，然后浏览器会对比新的<code>manifest</code>文件，如果文件没有发生改变，就不做任何操作，否则就会重新下载文件中的资源并进行离线存储。<br>离线的情况下，浏览器直接使用离线存储的资源。</p>
</blockquote>
<ul>
<li>请描述一下<code>cookie</code>，<code>sessionStorage</code>，<code>localStorage</code>的区别？</li></ul>
<blockquote>
<p><code>cookie</code>是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密）<br><code>cookie</code>数据始终在同源的<code>http</code>请求中携带（即使不需要），就会在浏览器和服务器间来回传递<br><code>sessionStorage</code>和<code>localStorage</code>不会自动把数据发给服务器，仅在本地保存</p>
<p>存储大小：<br><code>cookie</code>数据大小不能超过<code>4k</code><br><code>sessionStorage</code>和<code>localStorage</code>虽然也有存储大小的限制，但比<code>cookie</code>大得多，可以达到<code>5M</code>或更大</p>
<p>有效时间：<br><code>localStorage</code>存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据<br><code>sessionStorage</code>数据在当前浏览器窗口关闭后自动删除<br><code>cookie</code>设置的<code>cookie</code>过期时间之前一直有效，即使窗口或浏览器关闭</p>
</blockquote>
<ul>
<li><code>iframe</code>有哪些缺点？</li></ul>
<blockquote>
<p><code>iframe</code>会阻塞主页面的<code>onload</code>事件<br>搜索引擎的检索程序无法解读这种页面，不利于SEO<br><code>iframe</code>和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载<br>使用<code>iframe</code>之前需要考虑两个缺点。如果需要使用<code>iframe</code>，最好是通过JS<br>动态给<code>iframe</code>添加<code>src</code>属性值，可以绕开以上两个问题。</p>
</blockquote>
<ul>
<li><code>label</code>的作用是什么？怎么用？</li></ul>
<blockquote>
<p><code>label</code>标签定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。</p>
</blockquote>
<pre><code>&lt;label for=&quot;Name&quot;&gt;Number:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;Name&quot; id=&quot;Name&quot;&gt;
</code></pre><ul>
<li>HTML5的<code>form</code>如何关闭自动完成功能？</li></ul>
<blockquote>
<p>给不想要提示的<code>form</code>或某个<code>input</code>设置为<code>autocomplete=off</code></p>
</blockquote>
<ul>
<li>如何实现浏览器内多个标签页之间的通信？（阿里）</li></ul>
<blockquote>
<p><code>WebSocket</code>，<code>SharedWorkder</code><br>也可以调用<code>localStorage</code>、<code>cookies</code>等本地存储方式<br><code>localStorage</code>另一个浏览上下文中被添加、修改或删除时，它都会触发一个事件，通过监听事件，控制它的值来进行页面信息通信</p>
</blockquote>
<ul>
<li><code>WebSocket</code>如何兼容低浏览器？（阿里）</li></ul>
<blockquote>
<p><code>Adobe Flash Socket</code><br><code>ActiveX HTMLFile（IE）</code><br>基于<code>multipart</code>编码发送<code>XHR</code><br>基于长轮询的<code>XHR</code></p>
</blockquote>
<ul>
<li>页面可见性可以有哪些用途？</li></ul>
<blockquote>
<p>通过<code>visibilityState</code>的值检测页面当前是否可见，以及打开页面的时间等<br>在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放</p>
</blockquote>
<ul>
<li>如何在页面上实现一个圆形的可点击区域？</li></ul>
<blockquote>
<p>1、<code>map+area</code>或者<code>SVG</code><br>2、<code>border-radius</code><br>3、纯JS实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等</p>
</blockquote>
<ul>
<li>实现不使用<code>border</code>画出<code>1px</code>高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。</li></ul>
<pre><code>&lt;div style=&quot;height: 1px;overflow: hidden;background: red;&quot;&gt;&lt;/div&gt;
</code></pre><div style="height: 1px;overflow: hidden;background: red;"></div>

<h2 id="css">CSS</h2>
<ul>
<li>介绍一下标准CSS的盒子模型？低版本IE的盒子模型有什么不同？</li></ul>
<blockquote>
<p>1、有两种，IE盒子模型、W3C盒子模型<br>2、盒模型：内容（<code>content</code>）、填充（<code>padding</code>）、边界（<code>margin</code>）、边框（<code>border</code>）<br>3、区别：IE的<code>content</code>部分把<code>border</code>和<code>padding</code>计算进去</p>
</blockquote>
<ul>
<li>CSS选择符有哪些？哪些属性可以继承？</li></ul>
<blockquote>
<p>1、ID选择器<br>2、类选择器<br>3、标签选择器<br>4、相邻选择器（<code>h1+p</code>）<br>5、子选择器（<code>ul&gt;li</code>）<br>6、后代选择器（<code>li a</code>）<br>7、通配符选择器（<code>*</code>）<br>8、属性选择器（<code>a[rel=&quot;external&quot;]</code>）<br>9、伪类选择器（<code>a:hover,li:nth-child</code>）</p>
<p>可继承的样式：<code>font-size</code>、<code>font-family</code>、<code>color</code>、<code>ul</code>、<code>li</code>、<code>dl</code>、<code>dd</code>、<code>dt</code><br>不可继承的样式：<code>border</code>、<code>padding</code>、<code>margin</code>、<code>width</code>、<code>height</code></p>
</blockquote>
<ul>
<li>CSS优先级如何计算？</li></ul>
<blockquote>
<p>优先级就近原则，同权重情况下样式定义最近者为准<br>载入样式以最后载入的定位为准</p>
<p>优先级为：<br>同权重：内联样式表（标签内部）&gt;嵌入样式表（当前文件）&gt;外部样式表（外部文件）<br><code>!important &gt; id &gt; class &gt; tag</code><br><code>!important</code>比内联优先级高</p>
</blockquote>
<ul>
<li>CSS3新增伪类有哪些？</li></ul>
<blockquote>
<p><code>p:first-of-type</code> 选择属于其父元素的首个<code>&lt;p&gt;</code>元素<br><code>p:last-of-type</code> 选择属于其父元素的最后<code>&lt;p&gt;</code>元素<br><code>p:only-of-type</code> 选择属于其父元素唯一的<code>&lt;p&gt;</code>元素<br><code>p:nth-child(2)</code> 选择属于其父元素的第二个子元素的每个<code>&lt;p&gt;</code>元素<br><code>::after</code>在元素之前添加内容，也可以用来做清除浮动<br><code>::before</code>在元素之后添加内容<br><code>::enabled ::disabled</code>控制表单控件的禁用状态<br><code>:checked</code>单选框或复选框被选中</p>
</blockquote>
<ul>
<li>水平居中：给<code>div</code>设置一个宽度，然后添加<code>margin: 0 auto</code>属性</li></ul>
<pre><code>div {
  width: 200px;
  margin: 0 auto;
}
</code></pre><ul>
<li>让绝对定位的<code>div</code>居中</li></ul>
<pre><code>div {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
}
</code></pre><ul>
<li>水平垂直居中一</li></ul>
<blockquote>
<p>确定容器的宽高<br>设置层的外边距 </p>
</blockquote>
<pre><code>div {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  background: #ccc;
}
</code></pre><ul>
<li>水平垂直居中二</li></ul>
<blockquote>
<p>未知容器的宽高，利用<code>transform</code>属性</p>
</blockquote>
<pre><code>div {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bbb;
}
</code></pre><ul>
<li>水平垂直居中三</li></ul>
<blockquote>
<p>利用<code>flex</code>布局<br>实际使用时应考虑兼容性</p>
</blockquote>
<pre><code>body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background: green;
}

span {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}
</code></pre><ul>
<li><code>display</code>有哪些值？说明它们的作用？</li></ul>
<blockquote>
<p><code>block</code>块类型。默认宽度为父元素宽度，可设置宽高，换行显示。<br><code>none</code>缺省值。像行内元素类型一样显示。<br><code>inline</code>行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。<br><code>inline-block</code>默认宽高为内容宽度，可以设置宽高，同行显示。<br><code>list-item</code>像块类型元素一样显示，并添加样式列表标记。<br><code>table</code>此元素会作为块级表格显示。<br><code>inherit</code>规定应该从父元素继承<code>display</code>属性的值。</p>
</blockquote>
<ul>
<li><code>position</code>的值<code>relative</code>和<code>absolute</code>定位原点？</li></ul>
<blockquote>
<p><code>absolute</code>生成绝对定位的元素，相对于值不为<code>static</code>的第一个父元素进行定位<br><code>fixed</code>（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位<br><code>relative</code>生成相对定位的元素，相对于其正常位置进行定位<br><code>static</code>默认值。没有定位，元素出现在正常的流中（忽略<code>top</code>、<code>right</code>、<code>bottom</code>、<code>left</code>声明）<br><code>inherit</code>规定从父元素继承<code>position</code>属性的值</p>
</blockquote>
<ul>
<li>CSS3有哪些新特性？</li></ul>
<blockquote>
<p>新增各种CSS选择器（<code>:not(.input)</code>）：所有<code>class</code>不是<code>input</code>的节点<br>圆角<code>border-radius:8px;</code><br>多列布局<code>multi-column layout</code><br>阴影个反射<code>shadow\reflect</code><br>文字特效<code>text-shadow</code><br>文字渲染<code>text-decoration</code><br>线性渐变<code>gradient</code><br>旋转<code>transform</code><br>缩放、定位、倾斜、动画、多背景<br>例如：<code>transform:\scale(0.85,0.90)\translate(0,-30px)\skew(-9deg,0)\animation</code></p>
</blockquote>
<ul>
<li>请解释一下CSS3的<code>flexbox</code>（弹性盒布局模型），以及适用场景？</li></ul>
<blockquote>
<p>一个用于页面布局的全新CSS3功能，<code>flexbox</code>可以把列表放在同一个方向（从上到下，从左到右），并让列表能延伸到占用可用的空间。<br>较为复杂的布局还可以通过嵌套一个伸缩容器（<code>flex container</code>）来实现。<br>采用<code>flex</code>布局的元素，称为<code>flex</code>容器（<code>flex container</code>），简称<code>容器</code><br>它的所有子元素自动称为容器成员，称为<code>flex</code>项目（<code>flex item</code>），简称<code>项目</code><br>常规布局是基于块和内联流方向，而<code>flex</code>布局是基于<code>flex-flow</code>流，可以很方便地用来做居中，能对不同屏幕大小自适应。</p>
</blockquote>
<ul>
<li>用纯CSS创建一个三角形的原理是什么？</li></ul>
<blockquote>
<p>把上、左、右三条边隐藏掉（颜色设为<code>transparent</code>）</p>
</blockquote>
<pre><code>div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent red transparent;
}
</code></pre><ul>
<li>如何设计一个满屏<code>品</code>字布局？    </li></ul>
<blockquote>
<p>简单方式：<br>上面的<code>div</code>宽<code>100%</code><br>下面的两个<code>div</code>分别宽<code>50%</code><br>然后用<code>float</code>或者<code>inline</code>使其不换行即可</p>
</blockquote>
<pre><code>body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 300px;
    background: green;
}

.left {
    width: 50%;
    height: 300px;
    background: aqua;
    float: left;
}

.right {
    width: 50%;
    height: 300px;
    background: blue;
    float: right;
}
</code></pre><ul>
<li>如何实现CSS多列等高？</li></ul>
<blockquote>
<p>利用<code>padding-bottom|margin-bottom</code>正负值相抵；<br>设置父容器超出隐藏<code>overflow:hidden;</code>，这样子父容器的高度还是它里面的列没有设定<code>padding-bottom</code>时的高度；<br>当它里面的任何一列高度增加，则父容器的高度被撑开到里面最高那一列的高度<br>其他比这列低的会用它们的<code>padding-bottom</code>补偿这部分的高度差</p>
</blockquote>
<pre><code>body {
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.left {
    float: left;
    width: 30%;
    height: 100px;
    background: aqua;
    padding-bottom: 200px;
    margin-bottom: -200px;
}

.right {
    float: right;
    width: 70%;
    height: 200px;
    background: #6cc;
    padding-bottom: 200px;
    margin-bottom: -200px;
}
</code></pre><ul>
<li>经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么？常用hack技巧？</li></ul>
<blockquote>
<p><code>png24</code>位的图片在IE6浏览器上出现背景，解决方案是做成<code>png8</code><br>浏览器默认的<code>margin</code>和<code>padding</code>不同。解决方案是加一个全局<code>{margin:0;padding:0;}</code>来统一<br>IE6双边距<code>bug</code>块属性标签<code>float</code>后，又有横行的<code>margin</code>情况下，在IE6显示<code>margin</code>比设置的大<br>浮动IE产生的双倍距离</p>
</blockquote>
<pre><code>#box {
    float: left;
    width: 10px;
    margin: 0 0 0 100px;
}
</code></pre><blockquote>
<p>这种情况下IE会产生<code>20px</code>的距离，解决方案是在<code>float</code>的标签样式控制中加入<code>_display:inline;</code>将其转化为行内属性。（<code>_</code>这个符号只有IE6会识别）<br>渐进识别的方式，从总体中逐渐排除局部。<br>首先，巧妙地使用<code>\9</code>这一标记，将IE浏览器从所有情况中分离出来。<br>接着，再次使用<code>+</code>将IE8和IE7、IE6分离开来，这样IE8已经独立识别。</p>
</blockquote>
<pre><code>div {
    background-color: red; /*所有识别*/
    background-color: #00deff \9; /*IE6、7、9识别*/
    _background-color: #1e0bd1; /*IE6识别*/
}
</code></pre><blockquote>
<p>IE下可以使用获取常规属性的方法来获取自定义属性，也可以使用<code>getAttribute()</code>获取自定义属性；<br>firefox下只能使用<code>getAttribute()</code>获取自定义属性<br>解决方法：统一通过<code>getAttribute()</code>获取自定义属性</p>
<p>IE下<code>event</code>对象有<code>x</code>、<code>y</code>属性，但是没有<code>pageX</code>、<code>pageY</code>属性；<br>Firefox下<code>event</code>对象有<code>pageX</code>、<code>pageY</code>属性，但是没有<code>x</code>、<code>y</code>属性<br>解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数</p>
<p>chrome中文界面下默认会将小于<code>12px</code>的文本强制按照<code>12px</code>显示<br>可通过加入CSS属性<code>-webkit-text-size-adjust:none;</code>解决</p>
<p>超链接访问过后<code>hover</code>样式不出现，被点击访问过的超链接样式不再具有<code>hover</code>和<code>avtive</code>。<br>解决方法：改变CSS属性的排列顺序。</p>
</blockquote>
<pre><code>L-V-H-A：a:link{} a:visited{} a:hover{} a:active{}
</code></pre><ul>
<li><code>li</code>与<code>li</code>之间有看不见的空白间隔是什么原因引起的？有什么解决办法？</li></ul>
<blockquote>
<p>行框的排列会受到中间空白（回车/空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为<code>0</code>，就没有空格。</p>
</blockquote>
<ul>
<li>为什吗要初始化CSS样式？</li></ul>
<blockquote>
<p>浏览器有兼容问题，不同浏览器对有些标签的默认值不同，没有CSS初始化会出现浏览器之间的页面显示差异。</p>
<p>初始化样式会对SEO有一定的影响，尽量在影响最小的情况下进行初始化。</p>
</blockquote>
<ul>
<li><code>absolute</code>的<code>containing block</code>（容器块）计算方式跟正常流有什么不同？</li></ul>
<blockquote>
<p>无论属于哪种，都要先找到其祖先元素中最近的<code>position</code>值不为<code>static</code>的元素，然后再判断：<br>1、若此元素为<code>inline</code>元素，则<code>containing block</code>为能够包含这个元素生成的第一个和最后一个<code>inline box</code>的<code>padding box</code>（除<code>margin</code>，<code>border</code>外的区域）的最小矩形；<br>2、否则由这个祖先元素的<code>padding box</code>构成<br>如果都找不到，则为<code>initial containing block</code></p>
<p>补充：<br>1、<code>static/relative</code>，它的父元素的内容框（即去掉<code>padding</code>的部分）<br>2、<code>absolute</code>：向上找最近的定位为<code>absolute、relative</code>的元素<br>3、<code>fixed</code>：它的<code>containing block</code>一律为根元素（<code>html/body</code>），根元素也是<code>initial containing block</code></p>
</blockquote>
<ul>
<li>CSS里的<code>visibility</code>属性有个<code>collapse</code>属性值得作用？在不同浏览器下有什么区别？</li></ul>
<blockquote>
<p>对于普通元素<code>visibility:collapse;</code>会将元素完全隐藏，不占据页面布局空间，与<code>display:none;</code>表现相同。如果目标元素为<code>table</code>，<code>visibility:collapse;</code>将<code>table</code>隐藏，但是会占据页面布局空间。仅在Firefox下起作用，IE会显示元素，Chrome会将元素隐藏，但是占据空间。</p>
</blockquote>
<ul>
<li><code>position</code>跟<code>display</code>、<code>margin collapse</code>、<code>overflow</code>、<code>float</code>这些特性相互叠加后会怎样？</li></ul>
<blockquote>
<p>如果元素的<code>display</code>为<code>none</code>，那么元素不被渲染，<code>position</code>，<code>float</code>不起作用；<br>如果元素拥有<code>position:absolute;</code>或<code>position&quot;:fixed;</code>属性，那么元素将为绝对定位，<code>float</code>不起作用。<br>如果元素<code>float</code>属性不是<code>none</code>，元素会脱离文档流，根据<code>float</code>属性值来显示。有浮动、绝对定位，<code>inline-block</code>属性的元素，<code>margin</code>不会和垂直方向上的其他元素<code>margin</code>折叠。</p>
</blockquote>
<ul>
<li>对BFC规范（块级格式化上下文）的理解？</li></ul>
<blockquote>
<p>它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。<br>一个页面是由多个Box组成，元素的类型和<code>display</code>属性，决定了这个Box的类型<br>不同类型的Box会参与不同的<code>Formatting Context</code>（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会相互影响。</p>
</blockquote>
<ul>
<li>CSS定义的权重</li></ul>
<blockquote>
<p>权重的规则：标签的权重为<code>1</code>，<code>class</code>的权重为<code>10</code>，<code>id</code>的权重为<code>100</code>。</p>
</blockquote>
<ul>
<li>请解释一下为什么需要清除浮动？清除浮动的方法？</li></ul>
<blockquote>
<p>清除浮动是为了清除使用浮动元素产生的影响。<br>浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。</p>
<p>1、父级<code>div</code>定义<code>height</code>；<br>2、父级<code>div</code>也一起浮动；<br>3、常规的使用一个<code>class</code>；</p>
</blockquote>
<pre><code>.clearfix:before, .clearfix:after {
    content: &#39;&#39;;
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
</code></pre><blockquote>
<p>SASS编译的时候，浮动元素的父级<code>div</code>定义伪类<code>:after</code></p>
</blockquote>
<pre><code>div:after, div:before {
    content: &#39;&#39;;
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
</code></pre><blockquote>
<p>解析原理：<br>1、<code>displa:block;</code>使生成的元素以块级元素显示，占满剩余空间；<br>2、<code>height:0</code>避免生成内容破坏原有布局的高度；<br>3、<code>visibility:hidden;</code>使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；<br>4、通过<code>content:&quot;.&quot;</code>生成内容作为最后一个元素，<br>5、<code>zoom:1;</code>触发IE <code>hasLayout</code></p>
</blockquote>
<p>通过分析发现，除了<code>clear:both</code>用来闭合浮动，其他代码都是为了隐藏<code>content</code>生成的内容，这也是其他版本的闭合浮动为什么有<code>font-size:0</code>，<code>line-height:0</code></p>
<ul>
<li>什么是外边距合并？</li></ul>
<blockquote>
<p>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。<br>合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者</p>
</blockquote>
<ul>
<li><code>zoom:1</code>的清除浮动原理？</li></ul>
<blockquote>
<p>清除浮动，触发<code>hasLayout</code>；<br><code>zoom</code>属性时IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决IE存在的<code>bug</code><br>比如外边距的重叠，浮动清除，触发IE的<code>hasLayout</code>属性等</p>
<p>当设置了<code>zoom</code>的值后，所设置的元素就会扩大或缩小，高度宽度就会重新计算，一旦改变<code>zoom</code>值时也会发生重新渲染，运用这个原理解决IE中子元素浮动时父元素不随着自动扩大的问题。</p>
<p>目前非IE浏览器不支持这个属性，可以通过CSS3中的动画属性<code>scale</code>进行缩放。</p>
</blockquote>
<ul>
<li>浏览器如何解析CSS选择器？</li></ul>
<blockquote>
<p>从关键选择器开始匹配，然后左移查找规则选择器祖先元素。<br>只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或因为不匹配而放弃规则。</p>
</blockquote>
<ul>
<li><code>margin</code>和<code>padding</code>分别适用什么场景？</li></ul>
<blockquote>
<p><code>margin</code>用来隔开元素与元素的间距；<br><code>padding</code>用来隔开元素与内容的间隔；<br><code>margin</code>用于布局分开元素使元素与元素互不相干；<br><code>padding</code>用于元素与内容之间的间隔，让内容与元素之间有一段距离</p>
</blockquote>
<ul>
<li><code>::before</code>和<code>:after</code>中双冒号和单冒号有什么区别？解释一下这两个伪类的作用？</li></ul>
<blockquote>
<p>单冒号（<code>:</code>）用于CSS3伪类，双冒号（<code>::</code>）用于CSS3伪元素。（伪元素由双冒号和伪元素组成）<br>双冒号是在当前规范中引入的，用于区分伪类和伪元素。</p>
</blockquote>
<ul>
<li><p>如何修改Chrome记住密码后自动填充表单的黄色背景？</p>
<p>  input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {</p>
<pre><code>  background-color: rgb(250, 250, 189);
  background-image: none;
  color: rgb(0, 0, 0);
</code></pre><p>  }</p>
</li></ul>
<ul>
<li>设置元素浮动后，该元素的<code>display</code>值是多少？</li></ul>
<blockquote>
<p>自动变成<code>display:block</code></p>
</blockquote>
<ul>
<li>如何让Chrome支持小于<code>12px</code>的文字？</li></ul>
<blockquote>
<p>1、使用图片：如果是内容固定不变的情况下，使用将小于<code>12px</code>文字内容切出做图片，这样既兼容又美观。<br>2、使用<code>12px</code>字体大小样式设置，如果不考虑Chrome可以不用考虑兼容同时在设置小于<code>12px</code>对象设置<code>-webkit-text-adjust:none</code>，做到最大兼容考虑。<br>4、使用<code>12px</code>以上字体，重新考虑权重下兼容性。</p>
</blockquote>
<ul>
<li>如何用CSS让页面的字体变得清晰，变细？</li></ul>
<pre><code>-webkit-font-smoothing:antialiased;
</code></pre><ul>
<li><code>position:fixed;</code>在Android下无效如何处理？</li></ul>
<blockquote>
<p><code>fixed</code>的元素是相对整个页面固定位置，在屏幕上滑动只是在移动这个所谓的<code>viewport</code><br>并不是IOS不支持<code>fixed</code>，只是<code>fixed</code>的元素不是相对手机屏幕固定的。</p>
</blockquote>
<ul>
<li>手动写动画，最小时间间隔是多少？</li></ul>
<blockquote>
<p>多数显示器默认频率是<code>60Hz</code>，即1秒刷新<code>60</code>次，所以理论上最小间隔为<code>1/60*1000ms=16.7ms</code></p>
</blockquote>
<ul>
<li><code>display:inline-block</code>什么时候会显示间隙？</li></ul>
<blockquote>
<p>移除空格、使用<code>margin</code>负值、使用<code>font-size:0</code>、<code>letter-spacing</code>、<code>word-spacing</code></p>
</blockquote>
<ul>
<li>什么是<code>cookie</code>隔离？（请求资源的时候不要让它携带cookie）</li></ul>
<blockquote>
<p>如果静态文件都放在主域名下，静态文件请求的时都带有<code>cookie</code>的数据提交给<code>server</code>，非常浪费流量。</p>
<p>因为<code>cookie</code>有域的限制，因此不能跨域提交请求，所以使用非主要域名的时候，请求头中就不会带有<code>cookie</code>数据。<br>这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。<br>同时这种方式不会将<code>cookie</code>传入Web Server，也减少了Web Server对<code>cookie</code>的处理分析环节。<br>提高了webserver的HTTP请求的解析速度。</p>
</blockquote>
<h2 id="javascript">JavaScript</h2>
<ul>
<li>介绍JS的基本数据类型</li></ul>
<blockquote>
<p><code>undefined</code>、<code>null</code>、<code>Boolean</code>、<code>number</code>、<code>string</code><br>ES6新增：<code>symbol</code>（创建唯一且不可变数据类型）</p>
</blockquote>
<ul>
<li>介绍JS有哪些内置对象？</li></ul>
<blockquote>
<p><code>Object</code>是JS中所有对象的父对象<br>数据封装类对象：<code>Object</code>、<code>Array</code>、<code>Boolean</code>、<code>Number</code>和<code>String</code><br>其他对象：<code>Function</code>、<code>arguments</code>、<code>Math</code>、<code>Date</code>、<code>RegExp</code>、<code>Error</code></p>
</blockquote>
<ul>
<li>写JS的基本规范</li></ul>
<blockquote>
<p>1、不在同一行声明多个变量<br>2、使用<code>===/!==</code>来比较<code>true/false</code>或者数值<br>3、使用对象字面量替代<code>new Array</code><br>4、不使用全局函数<br>5、<code>switch</code>语句必须带有<code>default</code>分支<br>6、函数应该有返回值<br>7、<code>for</code>循环必须使用大括号<br>8、<code>if</code>语句必须使用大括号<br>9、<code>for-in</code>循环中的变量，应该使用<code>var</code>关键字明确限定作用域，从而避免作用域污染</p>
</blockquote>
<ul>
<li>JS原型，原型链？有什么特点？</li></ul>
<blockquote>
<p>每个对象都会在其内部初始化一个属性，就是<code>prototype</code>（原型），当访问一个对象的属性时，如果这个对象内部不存在这个属性，就会去<code>prototype</code>里找这个属性，这个<code>prototype</code>又会有自己的<code>prototype</code>，如此反复，就是原型链的概念。</p>
<p>关系：<code>instance.constructor.prototype=instance.__proto__</code></p>
<p>特点：<br>JS对象通过引用来传递，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。</p>
<p>当需要一个属性时，JS引擎会先看当前对象中是否有这个属性，如果没有，就会查找它的<code>prototype</code>对象是否有这个属性，如此递推，一直检索到<code>Object</code>内建对象。</p>
</blockquote>
<pre><code>function Func() {}
Func.prototype.name = &quot;Sean&quot;;
Func.prototype.getInfo = function () {
    return this.name;
};
var person = new Func();//var person=Object.create(oldObject)
console.log(person.getInfo());//Sean
console.log(Func.prototype);//Object {name: &quot;Sean&quot;}
</code></pre><ul>
<li>JS有几种类型的值？画一下内存图？</li></ul>
<blockquote>
<p>栈：原始数据类型（<code>undefined</code>，<code>null</code>、<code>Boolean</code>、<code>number</code>、<code>string</code>）<br>堆：引用数据类型（对象、数组和函数）</p>
<p>两种类型的区别：存储位置不同<br>原始数据类型直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；<br>引用数据类型存储在堆中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；<br>引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解析器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。</p>
</blockquote>
<p><img src="https://camo.githubusercontent.com/d1947e624a0444d1032a85800013df487adc5550/687474703a2f2f7777772e77337363686f6f6c2e636f6d2e636e2f692f63745f6a735f76616c75652e676966" alt=""></p>
<ul>
<li>如何将字符串转化为数字，例如<code>12.3b</code>？</li></ul>
<blockquote>
<p><code>parseFloat(&#39;12.3b&#39;);</code></p>
</blockquote>
<ul>
<li>如何将浮点数点左边的数每三位添加一个逗号，如<code>12000000.11</code>转化为<code>12,000,000.11</code>？</li></ul>
<pre><code>function commafy(num) {
    return num &amp;&amp; num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($1, $2) {
        return $2 + &#39;,&#39;;
    })
}
</code></pre><ul>
<li>如何实现数组的随机排序？</li></ul>
<pre><code>//方法一：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function randSort(arr) {
    for (var i = 0, len = arr.length; i &lt; len; i++) {
        var rand = parseInt(Math.random() * len);
        var temp = arr[rand];
        arr[rand] = arr[i];
        arr[i] = temp;
    }
    return arr;
}
</code></pre><pre><code>//方法二：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function randSort(arr) {
    var mixedArray = [];
    while (arr.length &gt; 0) {
        var randomIndex = parseInt(Math.random() * arr.length);
        mixedArray.push(arr[randomIndex]);
        arr.splice(randomIndex, 1);
    }
    return mixedArray;
}
</code></pre><pre><code>//方法三：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort(function () {
    return Math.random() - 0.5;
});
</code></pre><ul>
<li>JS如何实现继承？</li></ul>
<blockquote>
<p>1、构造<br>2、原型<br>3、实例<br>4、拷贝</p>
<p>原型<code>prototype</code>机制或<code>apply</code>和<code>call</code>方法去实现比较简单，建议使用构造函数与原型混合方式。</p>
</blockquote>
<pre><code>function Parent() {
    this.name = name;
}
function Child() {
    this.age = age;
}
Child.prototype = new Parent();//继承Parent，通过原型
</code></pre><ul>
<li>JS创建对象的方式？</li></ul>
<blockquote>
<p>JS创建对象，就是使用内置对象或各种自定义对象，还可以使用<code>JSON</code>；<br>1、对象字面量<code>var person={firstname:&quot;Mark&quot;,lastname:&quot;Yun&quot;}</code><br>2、用<code>function</code>模拟无参数的构造函数</p>
</blockquote>
<pre><code>function Person() {}
var person = new Person();//定义一个function，如果使用new实例化，该function可以看作一个class
person.name = &quot;Mark&quot;;
person.age = &quot;25&quot;;
person.word = function () {
    return person.name + &#39;hello&#39;
};
</code></pre><blockquote>
<p>3、用<code>function</code>模拟参数构造函数来实现（用<code>this</code>关键字定义构造的上下文属性）</p>
</blockquote>
<pre><code>function Pet(name, age, hobby) {
    this.name = name;//this作用域，当前对象
    this.age = age;
    this.hobby = hobby;
    this.eat = function () {
        return &quot;我是&quot; + this.name + &quot;，我喜欢&quot; + this.hobby + &quot;，是个程序员。&quot;;
    }
}
var maidou = new Pet(&quot;麦兜&quot;, 25, &quot;coding&quot;);//实例化、创建对象
maidou.eat();//调用eat方法
</code></pre><blockquote>
<p>4、用工厂方式来创建（内置对象）</p>
</blockquote>
<pre><code>var mcDog = new Object();
mcDog.name = &quot;旺财&quot;;
mcDog.age = 3;
mcDog.work = function () {
    return mcDog.name + &#39;,汪汪汪......&#39;;
};
mcDog.work();
</code></pre><blockquote>
<p>5、用原型方式来创建</p>
</blockquote>
<pre><code>function Dog() {}
Dog.prototype.name = &quot;旺财&quot;;
Dog.prototype.eat = function () {
    return this.name = &quot;是个吃货&quot;
};
</code></pre><blockquote>
<p>6、用混合方式来创建</p>
</blockquote>
<pre><code>function Car(name, price) {
    this.name = name;
    this.price = price;
}

Car.prototype.sell = function () {
    return &quot;我是&quot; + this.name + &quot;，我现在卖&quot; + this.price + &quot;万元。&quot;;
};
var camry = new Car(&quot;凯美瑞&quot;, 27);
</code></pre><ul>
<li>JS作用域链？</li></ul>
<blockquote>
<p>全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。<br>当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。</p>
</blockquote>
<ul>
<li>谈谈对<code>this</code>对象的理解？</li></ul>
<blockquote>
<p><code>this</code>总是指向函数的直接调用者；<br>如果有<code>new</code>关键字，<code>this</code>指向<code>new</code>出来的对象；<br>在事件中，<code>this</code>指向触发这个事件的对象，特殊的是IE中的<code>attachEvent</code>中的<code>this</code>总是指向全局对象<code>window</code>。</p>
</blockquote>
<ul>
<li><code>eval</code>的作用？</li></ul>
<blockquote>
<p>它的功能是把对应的字符串解析成JS代码并运行；<br>应该避免使用<code>eval</code>，不安全，非常耗性能（<code>2</code>次，一次解析成JS语句，一次执行）<br>由<code>JSON</code>字符串转换成<code>JSON</code>对象的时候可以用<code>eval</code>，<code>var obj=eval(&#39;(&#39;+str+&#39;)&#39;);</code></p>
</blockquote>
<ul>
<li>什么是<code>window</code>对象？什么是<code>document</code>对象？</li></ul>
<blockquote>
<p><code>window</code>对象是指浏览器打开的窗口<br><code>document</code>对象时Document对象（HTML文档对象）的一个只读引用，<code>window</code>对象的一个属性。</p>
</blockquote>
<ul>
<li><code>null</code>、<code>undefined</code>的区别？</li></ul>
<blockquote>
<p><code>null</code>表示一个对象的值为<strong>空</strong>；<br><code>undefined</code>表示一个变量声明了，但是没有初始化（赋值）；</p>
<p><code>undefined</code>不是一个有效的<code>JSON</code>，而<code>null</code>是；<br><code>undefined</code>的类型（<code>typeof</code>）是<code>undefined</code><br><code>null</code>的类型<code>typeof</code>是<code>object</code></p>
<p>JS将未赋值的变量默认设为<code>undefined</code>；<br>JS从来不会将变量设为<code>null</code>。它是用来标明某个用<code>var</code>声明的变量时没有值。</p>
<p><code>typeof undefined;//undefined</code><br><code>undefined</code>：是一个表示<strong>无</strong>的原始值或说表示<strong>缺少值</strong>，就是此处应该有一个值，但是还没有定义。</p>
<p><code>typeof null;//null</code><br><code>null</code>：是一个对象（空对象，没有任何属性和方法）<br>作为函数的参数，表示该函数的参数不是对象；</p>
<p>注意：<br>在验证<code>null</code>时，一定要使用<code>===</code>，因为<code>==</code>无法区分<code>null</code>和<code>undefined</code></p>
</blockquote>
<pre><code>null == undefined;//true
null === undefined;//false
</code></pre><blockquote>
<p>写一个通用的事件侦听器函数</p>
</blockquote>
<p><p data-height="565" data-theme-id="0" data-slug-hash="bKjVvM" data-default-tab="js" data-user="whjin" data-embed-version="2" data-pen-title="通用的事件侦听器函数" class="codepen">See the Pen <a href="https://codepen.io/whjin/pen/bKjVvM/">通用的事件侦听器函数</a> by whjin (<a href="https://codepen.io/whjin">@whjin</a>) on <a href="https://codepen.io">CodePen</a>.</p></p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<ul>
<li><code>[&#39;1&#39;, &#39;2&#39;, &#39;3&#39;].map(parseInt);</code>答案是多少？</li></ul>
<blockquote>
<p><code>[&#39;1&#39;, &#39;2&#39;, &#39;3&#39;].map(parseInt);//[ 1, NaN, NaN ]</code>；<br><code>parseInt()</code>函数能解析一个字符串，并返回一个整数，需要两个参数（<code>val</code>、<code>radix</code>）；<br>其中<code>radix</code>表示要解析的数字的基数。（该值介于<code>2~36</code>之间，并且字符串中的数字不能大于<code>radix</code>才能正确返回数字结果值）；<br>此处<code>map</code>穿了<code>3</code>个（<code>element,index,array</code>），重写<code>parseInt</code>函数测试是否符合上面的规则。</p>
</blockquote>
<pre><code>function parseInt(str, radix) {
    return str + &#39;-&#39; + radix;
}
var a = [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;];
console.log(a.map(parseInt));//[ &#39;1-0&#39;, &#39;2-1&#39;, &#39;3-2&#39; ]不能大于radix
</code></pre><blockquote>
<p>因为二进制里面没有数字<code>3</code>，导致出现超范围的<code>radix</code>赋值和不合法的进制解析，才会返回<code>NaN</code>。</p>
</blockquote>
<ul>
<li>什么是事件？IE与火狐的事件机制有什么区别？如何组织冒泡？</li></ul>
<blockquote>
<p>1、在网页中的某个操作，例如点击一个按钮就会产生一个事件，可以被JS侦测到的行为。<br>2、事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；<br>3、<code>ev.stopPropation();</code>（旧IE的方法<code>ev.cancelBubble=true;</code>）</p>
</blockquote>
<ul>
<li>什么是<strong>闭包（closure）</strong>，为什么要使用它？</li></ul>
<blockquote>
<p>闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见方式是一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量；<br>利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部。</p>
<p><strong>闭包的特性：</strong><br>1、函数内再嵌套函数；<br>2、内部函数可以引用外层的参数和变量；<br>3、参数和变量不会被垃圾回收机制回收</p>
<p><code>li</code>节点的<code>onclick</code>事件都能正确的弹出当前被点击的<code>li</code>索引</p>
</blockquote>
<pre><code>var nodes = document.getElementsByTagName(&#39;li&#39;);
for (var i = 0, len = nodes.length; i &lt; len; i++) {
    nodes[i].onclick = (function (i) {
        return function () {
            console.log(i);
        }
    })(i)
}
</code></pre><blockquote>
<p>执行<code>sayNum()</code>后，<code>sayNum()</code>闭包内部变量依旧存在，而闭包内部的函数的变量不会存在；<br>使得JS的垃圾回收机制GC不会收回<code>sayNum()</code>所占用的资源，因为<code>sayNum()</code>的内部函数的执行需要依赖<code>sayNum()</code>中的变量。这是对闭包作用的非常直白的描述。</p>
</blockquote>
<pre><code>function sayNum() {
    var num = 666;
    var sayLog = function () {
        console.log(num);
    };
    num++;
    return sayLog;
}
var sayLog = sayNum();
sayLog();//667
</code></pre><ul>
<li>JS代码中的<code>use strict;</code>有什么作用？使用它区别是什么？</li></ul>
<blockquote>
<p><code>use strict</code>是一种ES6添加的（严格）运行模式，这种模式使得JS在更严格的条件下运行；</p>
<p>使JS编码更佳规范化的模式，消除JS语法的一些不合理、不严谨的地方，减少一些怪异行为。<br>默认支持的槽糕特性都会被禁用，比如不能使用<code>with</code>，也不能再意外的情况下给全局变量赋值；<br>全局变量的显示声明，函数必须声明在顶层，不允许再非函数代码块内声明函数，<code>arguments.callee</code>也不允许使用；<br>消除代码运行的一些不安全之处，保证代码运行的安全，限制函数中的<code>arguments</code>修改，严格模式下的<code>eval</code>函数的行为和非严格模式的也不相同。</p>
<p>提高编译器效率，增加运行速度；</p>
</blockquote>
<ul>
<li>如何判断一个对象是否属于某个类？</li></ul>
<blockquote>
<p>使用<code>instanceof</code></p>
</blockquote>
<pre><code>if (a instanceof Person) {
    console.log(&quot;yes&quot;);
}
</code></pre><ul>
<li>解释一下<code>new</code>操作符？</li></ul>
<blockquote>
<p>1、创建一个空对象，并且<code>this</code>变量引用该对象，同时还继承了该函数的原型；<br>2、属性和方法被加入到<code>this</code>引用的对象中；<br>3、新创建的对象由<code>this</code>所引用，并且最后隐式的返回<code>this</code>。</p>
</blockquote>
<pre><code>var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
</code></pre><ul>
<li>JS中的<code>hasOwnProperty</code>函数，执行对象查找时不会去查找原型，详细解释一下？</li></ul>
<blockquote>
<p>JS中<code>hasOwnProperty</code>函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。<br>此方法无法检查该对象的原型链中是否具有该属性；<br>该属性必须是对象本身的一个成员。</p>
<p>使用方法：<br><code>Object.hasOwnProperty(proName)</code><br>其中参数<code>object</code>是必选项。一个对象的实例。<br><code>proName</code>是必选项。一个属性名称的字符串值。</p>
<p>如果<code>object</code>具有指定名称的属性，JS中<code>hasOwnproperty</code>函数方法返回<code>true</code>，反之则返回<code>false</code>。</p>
</blockquote>
<ul>
<li>说一下你对JSON的了解？</li></ul>
<blockquote>
<p><code>JSON</code>是一种轻量级的数据交换格式。<br>它是基于JS的一个子集。数据格式简单，易于读写，占用带宽小</p>
<p><code>JSON</code>字符串转换成<code>JSON</code>对象：</p>
</blockquote>
<pre><code>var obj = eval(&#39;(&#39; + str + &#39;)&#39;);
var obj = str.parseJSON();
var obj = JSON.parse(str);
</code></pre><blockquote>
<p><code>JSON</code>对象转换成<code>JSON</code>字符串：</p>
</blockquote>
<pre><code>var last = obj.toJSONString();
var last = JSON.stringify(obj);
</code></pre><ul>
<li>JS有哪些延迟加载的方式？</li></ul>
<blockquote>
<p><code>defer</code>和<code>async</code>、动态创建DOM方式（用得最多）、按需异步加载JS</p>
</blockquote>
<ul>
<li><code>Ajax</code>是什么？如何创建一个<code>Ajax</code>？</li></ul>
<blockquote>
<p>异步传输+JS+XML<br>异步：向服务器发送请求时，不必等待结果，而是可以同时做其他的事情，等到有了结果会自己根据设定进行后续操作；<br>与此同时，页面不会发生整体刷新，提供了用户体验。</p>
<p>1、创建<code>XMLHTTPRequest</code>对象，也就是创建一个异步调用对象；<br>2、创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息；<br>3、设置响应HTTP请求状态变化的函数；<br>4、发送HTTP请求<br>5、获取异步调用返回的数据<br>6、使用JS和DOM实现局部刷新</p>
</blockquote>
<ul>
<li><code>Ajax</code>解决浏览器缓存问题？</li></ul>
<blockquote>
<p>1、在<code>ajax</code>发送请求前添加</p>
</blockquote>
<pre><code>AjaxObj.setRequestHeader(&quot;IF-Modified-Since&quot;,&quot;0&quot;);
</code></pre><blockquote>
<p>2、在<code>ajax</code>发送请求前添加</p>
</blockquote>
<pre><code>AjaxObj.setRequestHeader(&quot;Cache-Control&quot;, &quot;no-cache&quot;);
</code></pre><blockquote>
<p>3、在URL后面添加一个随机数：<code>&quot;fresh=&quot; + Math.random();</code>    </p>
<p>4、在URL后面添加时间戳：<code>&quot;nowtime=&quot; + new Date().getTime();</code></p>
<p>5、如果使用jQuery，则<code>$.ajaxSetup({cache: false});</code>。这样页面的所有<code>ajax</code>都会执行这条语句，不需要保存缓存记录。</p>
</blockquote>
<ul>
<li>同步和异步的区别？</li></ul>
<blockquote>
<p>同步：不同进程为协同完成某项工作，在先后次序上调整（通过<strong>阻塞</strong>，<strong>唤醒</strong>等方式）。</p>
<p>同步：浏览器访问服务器请求，页面刷新，重新发送请求，等待请求完成，页面刷新显示新内容，如此反复。<br>异步：浏览器访问服务器请求，操作页面，浏览器后端进行请求。等待请求完成，页面不刷新显示新内容。</p>
</blockquote>
<ul>
<li>如何解决跨域问题？</li></ul>
<blockquote>
<p><code>jsonp</code>、<code>iframe</code>、<code>window.name</code>、<code>window.postMessage</code>、服务器上设置代理页面</p>
</blockquote>
<ul>
<li><code>AMD</code>、<code>CMD</code>规范的却别？</li></ul>
<blockquote>
<p><code>AMD</code>异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行。<br>所有依赖某些模块的语句都放置在回调函数中。</p>
<p>区别：<br>1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。<br>2、CMD推崇依赖就近，AMD推崇依赖前置</p>
</blockquote>
<pre><code>//AMD
define([&#39;./a&#39;, &#39;./b&#39;], function (a, b) {//依赖必须一开始就写好
    a.doSomething();
    b.doSomething();
});

//CMD
define(function (require, exports, module) {
    var a = require(&#39;./a&#39;);
    a.doSomething();
    var b = require(&#39;./b&#39;);//依赖可以就近写
    b.doSomething();
});
</code></pre><ul>
<li><code>document.write</code>和<code>innerHTML</code>的区别？</li></ul>
<blockquote>
<p><code>document.write</code>只能重回整个页面<br><code>innerHTML</code>可以重绘页面的一部分</p>
</blockquote>
<ul>
<li><code>DOM</code>操作——添加、移除、移动、赋值、创建和查找节点？</li></ul>
<blockquote>
<p>1、创建新节点</p>
</blockquote>
<pre><code>createDocumentFragment();//创建一个DOM片段
createElement();//创建一个具体的元素
createTextNode();//创建一个文本节点
</code></pre><blockquote>
<p>2、添加、移除、替换、插入</p>
</blockquote>
<pre><code>appendChild();//添加
removeChild();//移除
replaceChild();//替换
insertBefore();//在已有的子节点前插入一个新的子节点
</code></pre><blockquote>
<p>3、查找</p>
</blockquote>
<pre><code>getElementsByTagName();//通过标签名
getElementsByName();//通过元素的Name属性的值（IE容错能力较强，会得到一个数组，其中包括id等于name值）
getElementById();//通过元素id，唯一性
</code></pre><ul>
<li><code>jquery.extend</code>和<code>jquery.fn.extend</code>的区别？</li></ul>
<blockquote>
<p><code>jquery.extend</code>为<code>jquery</code>类添加类方法，可以理解为添加静态方法<br><code>jquery.fn.extend</code>:<br>源码<code>jquery.fn=jquery.prototype</code>，对<code>jquery.fn</code>的扩展，就是为<code>jquery</code>类添加成员函数<br><strong>使用</strong>：<br><code>jquery.extend</code>扩展，需要通过<code>jquery</code>类调用，而<code>jquery.fn.extend</code>扩展，所有<code>jquery</code>实例都可以直接调用。</p>
</blockquote>
<ul>
<li>针对jQuery的优化方法？</li></ul>
<blockquote>
<p>基于<code>class</code>的选择器的性能相对于<code>id</code>选择器开销很大，因为需要遍历所有DOM元素。</p>
<p>频繁操作的DOM，先缓存起来再操作。用<code>jQuery</code>的链式调用更好。比如<code>var str=$(&quot;a&quot;).attr(&quot;href&quot;);</code></p>
<p><code>for (var i = size, len = arr.length; i &lt; len; i++) {}</code></p>
</blockquote>
<ul>
<li>如何判断当前脚本运行在浏览器还是Node环境中？（阿里）</li></ul>
<blockquote>
<p><code>this === window ? &#39;browser&#39; : &#39;node&#39;;</code><br>通过判断<code>global</code>对象是否为<code>window</code>，如果不为<code>window</code>，当前脚本没有运行在浏览器中。</p>
</blockquote>
<ul>
<li>哪些操作会造成内存泄漏？</li></ul>
<blockquote>
<p>垃圾回收器定义扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为<code>0</code>（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收。</p>
<p><code>setTimeout</code>的第一个参数使用字符串而非函数，会引发内存泄漏。<br>闭包、控制台日志、循环（两个对象彼此引用，且彼此保留时，就会产生一个循环）</p>
</blockquote>
<ul>
<li>用JS实现千位分隔符？</li></ul>
<pre><code>function commafy(num) {
    return num &amp;&amp; num
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
            return $1 + &#39;,&#39;;
        })
}
</code></pre><ul>
<li>使用JS实现获取文件扩展名？</li></ul>
<pre><code>function getFileExtension(filename) {
    return filename.splice((filename.ladtIndexOf(&quot;.&quot;) - 1 &gt;&gt;&gt; 0) + 2);
}
</code></pre><blockquote>
<p><code>String.lastIndexOf()</code>方法返回指定值，在调用该方法的字符串中最后出现的位置，如果没找到则返回<code>-1</code>。<br>对于<code>filename</code>和<code>.hiddenfile</code>，<code>lastIndexOf</code>的返回值分别为<code>0</code>和<code>-1</code>。<br><code>String.prototype.splice()</code>从计算的索引提取文件的扩展名。如果索引比文件名的长度大，结果为<code>&quot;&quot;</code>。</p>
</blockquote>
<ul>
<li>webpack热更新实现原理？</li></ul>
<blockquote>
<p>1、<code>webpack</code>编译期，为需要热更新的<code>entry</code>注入热更新代码（<code>EventSource</code>通信）<br>2、页面首次打开后，服务端与客户端通过<code>EventSource</code>建立通信渠道，把下一次的<code>hash</code>返回前端<br>3、客户端获取到<code>hash</code>，这个<code>hash</code>将作为下一次请求服务端<code>hot-update.js</code>和<code>hot-update.json</code>的<code>hash</code><br>4、修改页面代码，<code>webpack</code>监听到文件修改后，开始编译，编译完成后发送<code>build</code>消息给客户端<br>5、客户端获取到<code>hash</code>，成功后客户端构造<code>hot-update.js</code>的<code>script</code>链接，然互殴插入主文档<br>6、<code>hot-update.js</code>插入成功后，执行<code>hotAPI</code>的<code>createRecord</code>和<code>reload</code>方法，获取到组件的<code>render</code>方法，重新<code>render</code>组件，从而实现UI无刷新更新。</p>
</blockquote>
<h2 id="es6">ES6</h2>
<ul>
<li><code>Object.is()</code>与原来的比较操作符<code>===</code>、<code>==</code>的区别？</li></ul>
<blockquote>
<p><code>==</code>判断，会在比较时进行类型转换<br><code>===</code>判断（严格判断），比较时不进行隐式类型转换，类型不同就会返回<code>false</code></p>
<p><code>Object.is()</code>在<code>===</code>判断的基础上特别处理了<code>NaN</code>、<code>-0</code>和<code>+0</code>，保证<code>-0</code>和<code>+0</code>不再相同，但<code>Object.is(NaN,NaN)</code>会返回<code>true</code></p>
</blockquote>
<ul>
<li>如何进行页面重构？</li></ul>
<blockquote>
<p>网站重构：在不改变UI的情况下对网站进行优化，在扩展的同时保持一致的UI。</p>
<p>对传统的网站来说，重构通常是：<br>1、表格<code>table</code>布局改为<code>div+css</code><br>2、使网站前端兼容于现代浏览器<br>3、对于移动平台的优化<br>4、针对SEO进行优化</p>
<p>深层次的网站重构应该考虑：<br>1、减少代码间的耦合<br>2、让代码保持弹性<br>3、严格按照规范编写代码<br>4、设计可扩展的API<br>5、代替旧有的框架、语言<br>6、增强用户体验<br>7、对速度的优化</p>
<p>1、压缩JS、CSS、<code>image</code>等前端资源（通常是由服务器来解决）<br>2、程序的性能优化（数据读写）<br>3、采用CDN来加速资源加载<br>4、对于JS DOM的优化<br>5、HTTP服务器的文件缓存</p>
</blockquote>
<ul>
<li>列举IE与其他浏览器不同的特性？</li></ul>
<blockquote>
<p>事件：触发事件的元素被认为是目标（<code>target</code>）。在IE中，目标包含在<code>event</code>对象的<code>SRCElement</code>属性；</p>
<p>获取字符代码：如果按键代表一个字符（<code>shift</code>、<code>Ctrl</code>、<code>Alt</code>除外），IE的<code>keyCode</code>会返回字符代码<code>unicode</code>，DOM中按键的代码和字符是分离的，要获取字符代码，需要使用<code>charCode</code>属性；</p>
<p>阻止某个事件的默认行为：IE中阻止某个事件的默认行为，必须将<code>returnValue</code>属性设置为<code>false</code>，火狐浏览器中需要调用<code>preventDefault()</code>方法。</p>
<p>停止事件冒泡，IE中阻止事件进一步冒泡，需要设置<code>cancelBubble</code>为<code>true</code>，火狐中需要调用<code>stopPropagation()</code>。</p>
</blockquote>
<ul>
<li>解析一下优雅降级和渐进增强？</li></ul>
<blockquote>
<p>优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是旧式浏览器，则代码会针对旧版本的IE进行降级处理，使之在旧式浏览器上以某种形式降级体验而不至于完全不能使用。<br>例如：<code>border-shadow</code></p>
<p>渐进增强：从被所有浏览器支持的基本能工开始，逐步地添加那些只有新版本浏览器才支持的功能，向页面增加不影响基础浏览器的额外样式和功能。当浏览器支持时，它们会自定地呈现出来并发挥作用。<br>例如：默认使用<code>flash</code>上传，但如果浏览器支持HTML5的文件上传功能，则使用HTML5实现更好的体验。</p>
</blockquote>
<ul>
<li>Web应用从服务器主动推送Data到客户端有哪些方式？</li></ul>
<blockquote>
<p>HTML5提供的<code>WebSocket</code><br>不可见的<code>iframe</code><br><code>WebSocket</code>通过<code>flash</code><br><code>XHR</code>长时间连接<br><code>XHR Multipart Streaming</code><br><code>&lt;script&gt;</code>标签的长时间连接（可跨域）</p>
</blockquote>
<ul>
<li>谈一下Node的优点和缺点？</li></ul>
<blockquote>
<p><strong>优点：</strong><br>因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求；<br>因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好很多。<br>此外，与Node代理服务器交互的客户端代码是由JS语言编写，因此客户端和服务器端都用同一种语言编写。</p>
<p><strong>缺点：</strong><br>Node是一个相对新的开源项目，所以不太稳定，总是一直在变，而且缺少足够多的第三方库支持。</p>
</blockquote>
<ul>
<li>你使用过哪些前端性能优化的方法？</li></ul>
<blockquote>
<p>1、减少HTTP请求次数：<code>CSS Sprites</code>、<code>JS</code>、<code>CSS</code>源码压缩、控制图片大小；网页<code>Gzip</code>，CDN托管，<code>data</code>缓存，图片服务器<br>2、前端模板：JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数<br>3、用<code>innerHTML</code>代替DOM操作，减少DOM操作次数，优化JS性能<br>4、当需要设置的样式很多时，设置<code>className</code>而不是直接操作<code>style</code><br>5、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。<br>6、避免使用<code>CSS</code>表达式，又称动态属性<br>7、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳<br>8、避免在页面的主题布局中使用<code>table</code>，<code>table</code>要等其中的内容完全下载之后才会显示出来，显示比<code>div+css</code>布局慢。</p>
<p>对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO读写。<br>向前端优化指的是，在不影响功能和体验的情况下，<br>能在浏览器执行的不在服务器端执行，<br>能在缓存服务器上直接返回的不要到应用服务器执行，<br>程序能直接取得的结果不要到外部取得，<br>本机内能取得的数据不要到远程取得，<br>内存能取到的不要到磁盘上取，<br>缓存中有得不要去数据库查询。</p>
<p>减少数据库操作，指的是减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让程序完成（例如<code>join</code>查询），<br>减少磁盘IO指尽量不适用文件系统作为缓存、减少读写文件次数等。</p>
</blockquote>
<ul>
<li>HTTP状态码有哪些？分别代表什么？</li></ul>
<blockquote>
<p>简单版：<br><code>100</code>-<code>continue</code>：继续，一般在发送<code>post</code>请求时，已发送<code>http header</code>之后服务器端将返回此信息表示确认，之后发送具体参数信息。<br><code>200</code>-<code>OK</code>：正常返回信息<br><code>201</code>-<code>created</code>：请求成功并且服务器创建了新的资源<br><code>202</code>-<code>Accepted</code>：服务器已接受请求，但尚未处理</p>
<p><code>301</code>-<code>Moved Permanently</code>：请求的网页已经永久移动到新的位置<br><code>302</code>-<code>Found</code>：临时性重定向<br><code>303</code>-<code>See Other</code>：临时性重定向，且总是使用<code>GET</code>请求新的<code>URI</code><br><code>304</code>-<code>Not Modified</code>：自从上次请求后，请求的网页未修改过<br><code>400</code>-<code>Bad Request</code>：服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求</p>
<p><code>401</code>-<code>Unauthorized</code>：请求未授权<br><code>403</code>-<code>Forbidden</code>：禁止访问<br><code>404</code>-<code>Not Found</code>：找不到如何与<code>URI</code>相匹配的资源</p>
<p><code>500</code>-<code>Internal Server Error</code>：最常见的服务器端错误<br><code>503</code>-<code>Server Unavailable</code>：服务器端暂时无法处理请求（可能是过载或维护）</p>
<p>完整版：<br><code>1**</code>（信息类）：表示接收到请求并且继续处理<br><code>100</code>——客户必须继续发出请求<br><code>101</code>——客户要求服务器根据请求转换HTML协议版本</p>
<p><code>2**</code>（响应成功）：表示动作被成功接收、理解和接受<br><code>200</code>——表明该请求被成功地完成，所请求的资源发送回客户端<br><code>201</code>——提示知道新文件的<code>URL</code><br><code>202</code>——接受和处理、但处理未完成<br><code>203</code>——返回信息不确定或不完整<br><code>204</code>——请求收到，但返回信息为空<br><code>205</code>——服务器完成了请求，用户代理必须复位当前已经浏览过的文件<br><code>206</code>——服务器已经完成了部分用户的<code>GET</code>请求</p>
<p><code>3**</code>（重定向类）：为了完成指定的动作，必须接受进一步处理<br><code>300</code>——请求的资源可在多处得到<br><code>301</code>——本网页被永久性转移到另一个<code>URL</code><br><code>302</code>——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始<code>URL</code>地址，重定向，新的<code>URL</code>会在<code>response</code>中的<code>Location</code>中返回，浏览器将会使用新的<code>URL</code>发出新的<code>request</code>。<br><code>303</code>——建议客户访问其他<code>URL</code>或访问方式<br><code>304</code>——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存，还可以继续使用。<br><code>305</code>——请求的资源必须从服务器指定的地址得到<br><code>306</code>——前一版本HTTP中使用的代码，现行版本中不再使用<br><code>307</code>——申明请求的资源临时性删除</p>
<p><code>4**</code>（客户端错误类）：请求包含错误语法或不能正确执行<br><code>400</code>——客户端请求有语法错误，不能被服务器所理解</p>
<p><code>401</code>——请求未经授权，这个状态码必须和<code>WWW-Authenticate</code>报头域一起使用<br>HTTP <code>401.1</code>——未授权：登录失败<br>HTTP <code>401.2</code>——未授权：服务器配置问题导致登录失败<br>HTTP <code>401.3</code>——ACL 禁止访问资源<br>HTTP <code>401.4</code>——未授权：授权被筛选器拒绝<br>HTTP <code>401.5</code>——未授权：ISAPI或CGI授权失败</p>
<p><code>402</code>——保留有效<code>ChargeTo</code>头响应</p>
<p><code>403</code>——禁止访问，服务器收到请求，但是拒绝提供服务<br>HTTP <code>403.1</code>——禁止访问：禁止可执行访问<br>HTTP <code>403.2</code>——禁止访问：禁止读访问<br>HTTP <code>403.3</code>——禁止访问：禁止写访问<br>HTTP <code>403.4</code>——禁止访问：要求SSL<br>HTTP <code>403.5</code>——禁止访问：要求SSL <code>128</code><br>HTTP <code>403.6</code>——禁止访问：IP地址被拒绝<br>HTTP <code>403.7</code>——禁止访问：要求客户证书<br>HTTP <code>403.8</code>——禁止访问：禁止站点访问<br>HTTP <code>403.9</code>——禁止访问：连接的用户过多<br>HTTP <code>403.10</code>——禁止访问：配置无效<br>HTTP <code>403.11</code>——禁止访问：密码更改<br>HTTP <code>403.12</code>——禁止访问：映射器拒绝访问<br>HTTP <code>403.13</code>——禁止访问：客户证书已被吊销<br>HTTP <code>403.15</code>——禁止访问：客户访问许可过多<br>HTTP <code>403.16</code>——禁止访问：客户证书不可信或者无效<br>HTTP <code>403.17</code>——禁止访问：客户证书已经到期或者尚未生效</p>
<p><code>404</code>——一个<code>404</code>错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。<br><code>405</code>——用户在<code>Request-Line</code>字段定义的方法不予许<br><code>406</code>——根据用户发送的<code>Accept</code>头，请求资源不可访问<br><code>407</code>——类似<code>401</code>，用户必须首先在代理服务器上得到授权<br><code>408</code>——客户端没有在用户指定的时间内完成请求<br><code>409</code>——对当前资源状态，请求不能完成<br><code>410</code>——服务器上不再有此资源，且无进一步的参考地址<br><code>411</code>——服务器拒绝用户定义的<code>Content-Length</code>属性请求<br><code>412</code>——一个或多个请求头字段在当前请求中错误<br><code>413</code>——请求的资源大于服务器允许的大小<br><code>414</code>——请求的资源URL长于服务器允许的长度<br><code>415</code>——请求的资源不支持请求项目格式<br><code>416</code>——请求中包含<code>Range</code>请求头字段，在当前请求资源范围内没有<code>Range</code>指示值，请求也不包含<code>If-Rane</code>请求头字段<br><code>417</code>——服务器不满足请求<code>Expect</code>头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求。</p>
<p><code>5**</code>（服务端错误类）：服务器不能正确执行一个正确的请求<br>HTTP <code>500</code>——服务器遇到错误，无法完成请求<br>HTTP <code>500.100</code>——内部服务器错误——ASP错误<br>HTTP <code>500.11</code>——服务器关闭<br>HTTP <code>500.12</code>——应用程序重新启动<br>HTTP <code>500.13</code>——服务器太忙<br>HTTP <code>500.14</code>——应用程序无效<br>HTTP <code>500.15</code>——不允许请求<code>global.asa</code></p>
<p>Error <code>501</code>——未实现</p>
<p>HTTP <code>502</code>——网关错误<br>HTTP <code>503</code>——由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常</p>
</blockquote>
<ul>
<li>一个页面从输入URL到页面加载显示完成，这个过程发生了什么？（流程越详细越好）</li></ul>
<blockquote>
<p>从URL规范、HTTP协议、DNS、CDN、数据库查询到浏览器解析、CSS规则构建、<code>layout</code>、<code>paint</code>、<code>onload/domready</code>、JS执行、JS API绑定等</p>
<p>1、浏览器会开启一个线程来处理这个请求，对URL分析判断如果是HTTP协议就按照Web方式来处理；<br>2、调用浏览器内核中的对应方法，比如<code>webview</code> 中的<code>loadUrl</code>方法；<br>3、通过DNS解析获取网址的IP地址，设置UA等信息发出第二个GET请求；<br>4、记性HTTP协议会话，客户端发送报头（请求报头）；<br>5、进入到web服务器上的Web Server，如Accept、Tomcat、Node.js等服务器；<br>6、进入部署好的后端应用，如PHP、Java、JavaScript、python等，找到对应的请求处理；<br>7、处理结束反馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回<code>304</code>；<br>8、浏览器开始下载HTML文档（响应报头，状态码<code>200</code>），同时是使用缓存；<br>9、文档树建立，根据标记请求所需要指定MIME类型的文件（比如css、js），同时设置了<code>cookie</code>；<br>10、页面开始渲染DOM，JS根据DOM API操作DOM，执行事件绑定等，页面显示完成。</p>
<p>浏览器把请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；<br>服务器交给后台处理完成后返回数据，浏览器接收文件；<br>浏览器对加载到的资源进行语法解析，建立相应的内部数据结构；<br>载入解析好的资源文件，渲染页面显示内容。</p>
</blockquote>

</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
